<template>
  <div class="pd10">
    <div v-if="loading">
      视图数据加载中...
    </div>
    <div v-else>
      <div v-if="!hasInit">
        视图数据加载出现错误
      </div>
      <div v-else>
        <a-tabs v-model="tab" type="editable-card">
          <a-tab-pane tab="新增视图" key="add"></a-tab-pane>
          <a-tab-pane tab="单个更新视图" key="update"></a-tab-pane>
          <a-tab-pane tab="批量更新视图" key="batch"></a-tab-pane>
          <a-tab-pane tab="过滤器视图" key="filter"></a-tab-pane>
        </a-tabs>
        <SearchFilter :formId="formId" v-if="tab==='filter'"></SearchFilter>
        <a-row v-else :gutter="10">
          <a-col :span="3">
            <div :style="{border:'dashed 1px #333',padding:`10px`}">
              <draggable
                v-model="columns"
                handle=".sortHandler"
                chosenClass="chosen"
                forceFallback="true"
                group="module"
                animation="1000"
                @start="onStart"
                @end="onEnd">
                <transition-group>
                  <a-tag
                    color="blue"
                    @dblclick.native="removeColumn(i)"
                    class="wfull mb10 cpt"
                    v-for="(c,i) in columns"
                    :key="c.id">
                    <i class="fa fa-arrows sortHandler cpt mr10"/>{{ c.name }}
                  </a-tag>
                </transition-group>
              </draggable>
              <a-tag
                @dblclick.native="addColumn(c)"
                v-for="c in extraColumnList"
                :key="c.id"
                class="wfull mb10 cpt"
                color="red">
                <i class="fa fa-minus-circle mr10"/>{{ c.name }}
              </a-tag>
            </div>
          </a-col>
          <a-col :span="16">
            <div :style="{border:'dashed 1px #333',padding:`${layout.视图边距}px`}">
              <a-row :gutter="layout.左右间距">
                <a-col :offset="c.offset" :span="c.span" v-for="(c,i) in columns" :key="`column${i}`">
                  <div :class="layout.标签对齐==='top'?'':'flx-s'" :style="{marginBottom:`${layout.上下间距}px`}">
                    <div :class="layout.标签对齐==='right'?'tar':'tal'" class="mr10" :style="{width:`${layout.标签宽度}px`}">
                      <a-popover style="z-index:9999;" placement="topLeft">
                        <template slot="content">
                          <div class="flx-s mb10">
                            占宽度<div class="ml5"><ZgNumber v-model="c.span" :width="120" :min="6" :max="24"></ZgNumber></div>
                          </div>
                          <div class="flx-s">
                            左偏移<div class="ml5"><ZgNumber v-model="c.offset" :width="120" :min="0" :max="24"></ZgNumber></div>
                          </div>
                        </template>
                        <span class="cpt column-name">{{ c.name }}</span>
                      </a-popover>
                    </div>
                    <div class="flx-1" :class="layout.标签对齐==='top'?'mt10':''">
                      <div v-if="c.isCal" class="info fs12">【计算属性】</div>
                      <div v-else>
                        <ZgInput v-if="c.type==='单行文本'"></ZgInput>
                        <ZgNumber v-if="c.type==='整数'"></ZgNumber>
                        <ZgNumber v-if="c.type==='浮点数'" isFloat></ZgNumber>
                        <ZgCheckbox v-if="c.type==='单选框'"></ZgCheckbox>
                        <ZgSelectMany v-if="c.type==='多选'" :code="c.extra.字典类型"></ZgSelectMany>
                        <ZgDatePicker v-if="c.type==='日期'"></ZgDatePicker>
                        <ZgDateTimePicker v-if="c.type==='日期时间'"></ZgDateTimePicker>
                        <ZgTimePicker v-if="c.type==='时间'"></ZgTimePicker>
                        <ZgDictionary v-if="c.type==='字典'" :code="c.extra.字典类型"></ZgDictionary>
                        <ZgEnum v-if="c.type==='枚举'" :code="c.extra.枚举编码"></ZgEnum>
                        <ZgSwitch v-if="c.type==='开关'"></ZgSwitch>
                        <ZgTextarea v-if="c.type==='多行文本'" :rows="parseInt(c.extra.行数)"></ZgTextarea>
                        <ZgTinymce v-if="c.type==='富文本'" :height="parseInt(c.extra.高度)"></ZgTinymce>
                        <ZgUpImg v-if="c.type==='图片'"></ZgUpImg>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col :span="5">
            <div :style="{border:'dashed 1px #333',padding:`10px`}">
              <div class="flx-s mb10">
                <div class="w120 mr5">视图边距</div>
                <ZgNumber v-model="layout.视图边距"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">标签宽度</div>
                <ZgNumber v-model="layout.标签宽度"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">标签对齐</div>
                <ZgSelect v-model="layout.标签对齐" :options="[{value:'left',label:'靠左'},{value:'right',label:'靠右'},{value:'top',label:'靠上'}]"></ZgSelect>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">左右间距</div>
                <ZgNumber v-model="layout.左右间距"></ZgNumber>
              </div>
              <div class="flx-s mb10">
                <div class="w120 mr5">上下间距</div>
                <ZgNumber v-model="layout.上下间距"></ZgNumber>
              </div>
              <div class="flx-c">
                <a-button @click="search" class="mr10">刷新</a-button>
                <a-button @click="reset" class="mr10">重置</a-button>
                <a-button type="primary" @click="saveFormLayout">保存视图</a-button>
              </div>
              <div class="mt30 pt6 error fs12" style="border-top:solid 1px #999">
                提示：<br/>
                (1)点击表单内字段可以设置字段宽度和左偏移量<br/>
                (2)双击左侧蓝色字段块可以从布局中删除该字段<br/>
                (3)双击左侧红色字段块可以将该字段加入到布局中<br/>
                (4)按住<i class="fa fa-arrows"/>图标可以对字段进行拖拽排序<br/>
                (5)点击【保存视图】按钮可以同时保存表单布局参数和字段布局参数<br/>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import SearchFilter from './SearchFilter'
import draggable from 'vuedraggable'
import { getExtra, getLayout } from './js/constant'
export default {
  components: {
    draggable, SearchFilter
  },
  props: {
    formId: {
      type: String,
      default: '0'
    }
  },
  data () {
    return {
      hasInit: false,
      loading: false,
      tab: 'add',
      saving: false,
      columns: [],
      extra: getExtra(),
      layout: getLayout()
    }
  },
  computed: {
    extraColumnList () {
      return this.allColumns.filter(t => {
        return !this.columns.some(x => {
          return x.id === t.id
        })
      })
    }
  },
  watch: {
    tab (v) {
      if (v === 'filter') {
        //
      } else {
        this.search()
      }
    },
    formId () {
      this.search()
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search () {
      if (this.tab === 'filter') {
        return
      }
      this.hasInit = false
      this.loading = true
      const timer = setTimeout(() => {
        this.loading = false
      }, 30000)
      this.$http.get('/zg-autoform/form/oneById', { formId: this.formId }, data => {
        console.log('123', data)
        this.layout = { '视图边距': 10, '标签宽度': 120, '标签对齐': 'right', '左右间距': 10, '上下间距': 10 }
        this.allColumns = data.allColumns
        this.columns = data[`${this.tab}Columns`].map((t, i) => {
          try {
            t.extra = Object.assign({}, this.extra, JSON.parse(t.extra))
          } catch (e) {
            t.extra = JSON.parse(JSON.stringify(this.extra))
          }
          t.span = t.span || 12
          t.offset = t.offset || 0
          t.sort = t.sort || (i + 1)
          return t
        })
        this.$nextTick(() => {
          this.columns.sort((a, b) => {
            return a.sort - b.sort
          })
          clearTimeout(timer)
          this.hasInit = true
          this.loading = false
        })
      })
    },
    reset () {
      this.layout = getLayout()
    },
    saveFormLayout () {
      const param = {
        formId: this.formId,
        type: this.tab,
        layout: JSON.stringify(this.layout)
      }
      this.$http.post('/zg-autoform/form/layout/update', param, () => {
        this.$success({ title: '表单布局保存成功' })
      })
      this.saveColumnLayout()
    },
    saveColumnLayout () {
      const cols = this.columns.map(t => {
        return {
          formId: this.formId,
          columnId: t.id,
          columnCode: t.code,
          columnType: t.type,
          span: t.span,
          offset: t.offset,
          type: this.tab,
          sort: t.sort
        }
      })
      const param = {
        formId: this.formId,
        layoutType: this.tab,
        layoutList: cols
      }
      this.$http.post('/zg-autoform/column/layout/update', param, (count) => {
        this.$success({ title: '字段布局保存成功' })
      })
    },
    onStart () {},
    onEnd () {
      this.saving = true
      const param = this.columns.map((t, i) => {
        t.sort = i + 1
        return t.id + ':' + (i + 1) + ':' + this.tab
      })
      this.$http.post('/zg-autoform/column/sort', param, (count) => {
        this.$success({ title: `字段排序成功,更改${count}条数据` })
        this.saving = false
      })
    },
    removeColumn (i) {
      this.columns.splice(i, 1)
    },
    addColumn (t) {
      try {
        t.extra = Object.assign({}, this.extra, JSON.parse(t.extra))
      } catch (e) {
        t.extra = JSON.parse(JSON.stringify(this.extra))
      }
      t.span = 12
      t.offset = 0
      t.sort = 100
      t.isExist = true
      t.type = t.compType
      this.columns.push(t)
    }
  }
}
</script>

<style lang="scss" scoped>
.column-name{
  border-bottom:solid 1px #2979ff;
  &:hover{
    color:#2979ff
  }
}
.chosen{
  border:solid 1px #096daf;
  background:#096daf;
  color:#fff;
}
</style>
